<template>
  <div
    v-show="show"
    transition="fade"
    transition-mode="out-in"
    class="popover">
    <ul>
      <li
        v-for="(item, index) in items"
        v-bind:data-index="index"
        v-on:click="onClickPopoverItem"
        class="popover-item" >
        <i v-bind:class="item.action"></i>
        {{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'popover',
    props: {
      items: {
        type: Array,
        required: true
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onClickPopoverItem(e) {
        this.$emit('clickItem', Number(e.target.dataset.index))
      }
    }
  }
</script>

<style lang="less" scoped>
  .popover {
    position: fixed;
    right: 10px;
    top: 44px;
    width: 148px;
    background: #4a4a4a;
    border-radius: 4px;
    z-index: 2048; // 大于navbar的层级
    &::before {
      content: "";
      border-width: 0 10px 15px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      right: 0;
      border-top-width: 0;
      top: -8px;
      margin-right: 4px;
      border-bottom-color: #4a4a4a;
    }

    ul {
      list-style: none;
    }
  }

  .popover-item {
    position: relative;
    padding: 15px;
    line-height: 1em;
    color: #dedede;
    &:active {
      background-color: darken(#4a4a4a, 10%);
    }

    + .popover-item {
      &::before {
        content: "";
        height: 1px;
        border-top: 1px solid #dedede;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        opacity: .3;
      }
    }

    i {
      display: inline-block;
      width: 13px;
      height: 16px;
      margin-bottom: -2px;
      margin-right: 10px;
    }
    .modify {
      background: url(../assets/icon-modify.png) no-repeat top left;
      background-size: 100% 100%;
    }

    .history {
      background: url(../assets/icon-history.png) no-repeat top left;
      background-size: 100% 100%;
    }
  }
</style>
